<template>
	<!-- 头部图片区域 -->
	<HeaderImage v-if="HeadInfo.id" :HeadInfo="HeadInfo"></HeaderImage>
	<!-- 节目列表 -->
	<List :ProgramList="ProgramList"></List>
	<!-- 主播信息 -->
	<userWork
		v-if="uuserInfo?.id"
		:uuserInfo="uuserInfo"
		:userWorkList="userWorkList"
		@changeHead="changeHead"></userWork>
	<!-- 用户评论 -->
	<comment :CommentList="CommentList"></comment>
	<!-- 相关专辑 -->
	<about :albumList="albumList" @changeHead="changeHead"></about>
	<!-- 猜你喜欢 -->
	<GuessLike :LikeList="LikeList" @changeHead="changeHead"></GuessLike>
</template>

<script setup lang="ts">
	// 导入获取头部信息接口函数
	import {
		reqHeadInfo,
		reqProgramList,
		type ProgramModel,
		reqUserInfo,
		type dataModel,
		reqUserWork,
		type userDataModel,
		reqCommentList,
		type commentDataModel,
		reqAlbum,
		type AlbumDataModel,
		reqLikeList,
		type LikeListDataModel,
	} from "@/api/CourseDetail";
	import { onMounted, ref, nextTick } from "vue";
	import userWork from "@/components/Coursedetail/userWork/index.vue";
	import comment from "@/components/Coursedetail/comment/index.vue";
	import GuessLike from "@/components/Coursedetail/GuessLike/index.vue";
	import HeaderImage from "@/components/Coursedetail/HeaderImage/index.vue";
	import about from "@/components/Coursedetail/about/index.vue";
	import List from "@/components/Coursedetail/List/index.vue";
	import { useRouter, useRoute } from "vue-router";

	//#region  获取页面初始数据
	// 声明函数来调用接口函数获取头部信息数据
	let id = ref(18724442);
	let anchorId = ref(109114414);
	let title = ref("第一狂妃：废材三小姐");
	let page = ref(1);
	let pageSize = ref(10);
	let HeadInfo = ref<any>({});
	let getHeadInfo = async (id: any) => {
		try {
			let result = await reqHeadInfo(id);
			const { data } = result;
			HeadInfo.value = data;
		} catch (error) {
			console.log(error);
		}
	};

	// 声明函数获取节目列表 数据
	let ProgramList = ref<ProgramModel[]>([]);
	let getProgramList = async (albumId: any) => {
		try {
			let result = await reqProgramList(albumId);
			const { trackDetailInfos } = result.data;
			ProgramList.value = trackDetailInfos;
		} catch (error) {
			console.log(error);
		}
	};

	// 声明函数获取主播信息
	let uuserInfo = ref<dataModel>();
	let getUserInfo = async (anchorId: any) => {
		try {
			let result = await reqUserInfo(anchorId);
			const { data } = result;
			uuserInfo.value = data;
		} catch (error) {
			console.log(error);
		}
	};

	// 获取主播作品
	let userWorkList = ref<userDataModel>();
	let getUserWorkList = async (anchorId: any) => {
		try {
			let result = await reqUserWork(anchorId);
			const { data } = result;
			userWorkList.value = data;
		} catch (error) {
			console.log(error);
		}
	};

	// 获取用户评论
	let CommentList = ref<commentDataModel>();
	let getCommentList = async (id: any) => {
		try {
			let result = await reqCommentList(id);
			const { data } = result;
			CommentList.value = data;
		} catch (error) {
			console.log(error);
		}
	};

	// 获取专辑列表
	let albumList = ref<AlbumDataModel>();
	let getAlbumList = async (title: string, page: number, pageSize: number) => {
		try {
			let result = await reqAlbum(title, page, pageSize);
			const { data } = result;
			albumList.value = data;
		} catch (error) {
			console.log(error);
		}
	};

	// 获取猜你喜欢列表
	let LikeList = ref<LikeListDataModel>();
	let getLikeList = async () => {
		try {
			let result = await reqLikeList();
			const { data } = result;
			LikeList.value = data;
		} catch (error) {
			console.log(error);
		}
	};

	//#endregion
	// 点击主播信息作品更新头部信息
	let router = useRouter();
	let route = useRoute();

	if (route.query.id) {
		id.value = Number(route.query.id);
	}
	if (route.query.anchorId) {
		anchorId.value = Number(route.query.anchorId);
	}
	if (route.query.title) {
		title.value = String(route.query.title);
	}

	let changeHead = async (uid: number) => {
		id.value = uid;
		router.push({
			path: "/coursedetail",
			query: {
				id: uid,
			},
		});
		getHeadInfo(id.value);
		getProgramList(id.value);
		getCommentList(id.value);
		await nextTick();
		anchorId.value = HeadInfo.value.albumDetailInfo.albumInfo.anchorId;
		title.value = HeadInfo.value.albumDetailInfo.albumInfo.title;
		getUserInfo(anchorId.value);
		getUserWorkList(anchorId.value);
		getAlbumList(title.value, page.value, pageSize.value);
	};

	onMounted(() => {
		getHeadInfo(id.value);
		getProgramList(id.value);
		getUserInfo(anchorId.value);
		getUserWorkList(anchorId.value);
		getCommentList(id.value);
		getAlbumList(title.value, page.value, pageSize.value);
		getLikeList();
	});
</script>

<style lang="less" scoped>
	// 详细介绍
	.shortIntro {
		font-size: 14px;
	}
</style>
